import React from "react";
import { Link, useNavigate } from "react-router-dom";
import { Dropdown, Space, Button } from "antd";
import { DownOutlined } from "@ant-design/icons";
import { useAppSelector } from "../../app/hooks";

const ManagerHeader = () => {
  const username = useAppSelector((state) => state.user.username);
  const navigate = useNavigate();

  const onQuit = () => {
    navigate("/login");
  };

  const aboutMeItem = [
    {
      key: "1",
      label: <Link to="/me">个人资料</Link>,
    },
    {
      key: "2",
      label: <Link to="">修改密码</Link>,
    },
    {
      key: "3",
      label: (
        <Button type="link" onClick={onQuit}>
          退出
        </Button>
      ),
    },
  ];

  return (
    <div style={{ display: "flex", justifyContent: "space-between" }}>
      <div className="logo" />

      <Dropdown
        arrow
        menu={{
          items: aboutMeItem,
        }}
      >
        <Space style={{ color: "#eee", cursor: "default" }}>
          <>
            {username}
            <DownOutlined />
          </>
        </Space>
      </Dropdown>
    </div>
  );
};

export default ManagerHeader;
